<script setup>
const emit = defineEmits(['select', 'clickself']);
const props = defineProps({
  list: {
    required: true,
    type: Array,
  },
});
</script>

<template>
  <div class="base-data-list-container">
    <ol class="base-data-list" @click.self="event => emit('clickself')">
      <template v-for="(item, i) in props.list" :key="i">
        <slot :item="item"></slot>
      </template>
    </ol>
  </div>
</template>

<style>
.base-data-list-container {
  position: absolute;
  width: 100%;
  height: calc(100% - var(--shrink, 40px));
}

.base-data-list {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.base-data-list > li {
  display: flex;
  gap: 1em;
  align-items: center;
  height: 40px;
  padding-left: 8px;
  padding-right: 12px;
  border-left: 4px solid transparent;
  outline: 1px solid transparent;
  outline-offset: -1px;
  cursor: pointer;
}

.base-data-list > li:hover,
.base-data-list > li.selected { background-color: rgb(234,246,255); }

.base-data-list > li.selected {
  color: rgb(54,156,255);
  /* outline-color: currentColor; */
}

.base-data-list > li:not(:last-child) { margin-bottom: 4px; }

.base-data-list > li > .ant-btn {
  width: auto;
  height: auto;
  padding-left: 4px;
  padding-right: 4px;
  border: 0;
  background: transparent;
}
.base-data-list > li > .ant-btn:focus { color: unset; }

.base-data-list > li > :first-child { flex: 1; }
.base-data-list > li > .label {
  outline: 1px dashed transparent;
  cursor: cell;
  user-select: none;
}

.base-data-list > li > .label.empty {
  text-decoration: underline dotted;
  color: rgba(0,0,0,.5);
}

.base-data-list > li > .label:hover { outline-color: currentColor; }
</style>
